<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Introduction to PHP GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, PHP, Introduction, Linux">
<meta name="description" content="This part of the PHP GTK tutorial is an introduction to PHP GTK.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Introduction to PHP GTK</h1>

<p>
In this part of the PHP GTK programming tutorial, we will introduce the GTK library and
create our first programs using the PHP programming language.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
The purpose of this tutorial is to get you started with the GTK and PHP. 
GTK is one of the leading toolkits for creating graphical user interfaces.
PHP is a highly popular scripting language used in server-side web development.
It can be also used to create command line scripts via PHP CLI, PHP Command
Line Interface. 
</p>

<h2>PHP-GTK</h2>

<p>
PHP-GTK is a language binding for PHP to write GTK applications.
PHP-GTK provides an object-oriented interface to GTK classes and functions. 
The home page for the project is
at <a href="http://gtk.php.net/">gtk.php.net</a>. There we find
a reference documentation. 
</p>

<p>
In order to run examples, we need to install PHP-CLI, PHP-GTK and Cairo for PHP. 
</p>

<h2>Installation</h2>

<p>
At the time of writing this tutorial, there are issues installing PHP-GTK on Linux. 
(Installing Cairo for PHP will be explained in the chapter
dedicated to painting with Cairo.)
</p>

<p>
The following are required packages:
</p>

<pre>
build-essential subversion php5-cli php5-dev libgtk2.0-dev libglade2-dev
</pre>

<p>
If you are not having one of these,
they must be installed. 
</p>

<pre>
svn co http://svn.php.net/repository/gtk/php-gtk/trunk php-gtk
</pre>

<p>
Now download the sources from the subversion tree. Do not use the source
tarballs. These instructions work for sources from the subversion repository.
</p>

<pre>
./buildconf
./configure
make
sudo make install
</pre>

<p>
These are commands used to build PHP-GTK. However, we will probably have issues
during the process. This is due to past libtool changes.
</p>

<pre>
./configure: line 11641: LTOPTIONS_VERSION: command not found
./configure: line 11642: LTSUGAR_VERSION: command not found
./configure: line 11643: LTVERSION_VERSION: command not found
./configure: line 11644: LTOBSOLETE_VERSION: command not foun
</pre>

<p>
The configure script gives error messages. 
</p>

<pre>
$ pwd
/home/vronskij/Downloads/php-gtk
$ cat /usr/share/aclocal/ltoptions.m4 /usr/share/aclocal/ltversion.m4 \
    /usr/share/aclocal/ltsugar.m4 /usr/share/aclocal/lt~obsolete.m4 >> aclocal.m4
</pre>

<p>
Now inside the build directory, we issue the above command. We will have a
new file aclocal.m4 in our directory. (Tip found on 
<a href="http://ubuntuforums.org/showthread.php?t=1377395">ubuntuforums.org</a>.)
Hopefully, now the configure script
will run. 
</p>

<pre>
extension=php_gtk2.so
</pre>

<p>
The final step is to edit php.ini file and add the above line under
the Dynamic Extensions section.
</p>


<h2>Simple example</h2>

<p>
Now that we have successfully installed the PHP-GTK library, we
can start with a small example. In this example, we create a simple window. 
The window is centered on the screen. 
</p>

<pre class="code">
&lt;?php
 
/* 
ZetCode PHP GTK tutorial

This program centers a window on 
the screen.

author: Jan Bodnar
website: www.zetcode.com
last modified: September 2011
*/

class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         

        $this-&gt;set_title('Simple'); 
        $this-&gt;set_default_size(250, 150); 

        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show(); 
    } 
} 
     
new Example(); 
Gtk::main(); 
?&gt;
</pre>

<p>
This example shows a 250x150 px window in the center of the screen.
</p>


<pre class="explanation">
class Example extends GtkWindow { 
</pre>

<p>
The Example class is based on the <code>GtkWindow</code> widget. 
</p>

<pre class="explanation">
$this-&gt;set_title('Simple'); 
</pre>

<p>
The <code>set_title()</code> method sets a title for the window.
</p>

<pre class="explanation">
$this-&gt;set_default_size(250, 150); 
</pre>

<p>
This line sets a size of the window. It is going to be
250px wide and 150px high. 
</p>


<pre class="explanation">
$this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 
</pre>

<p>
Here we connect the destroy signal to a callback. 
The <code>main_quit()</code> method quits the application for good.
The destroy signal is emitted, when we click on the close button 
in the titlebar. Or press Alt + F4. 
</p>


<pre class="explanation">
$this-&gt;set_position(GTK::WIN_POS_CENTER);
</pre>

<p>
This line centers the window on the screen. 
</p>


<pre class="explanation">
$this-&gt;show();
</pre>

<p>
When everything is ready, we show the window on the screen. 
</p>


<pre class="explanation">
new Example(); 
Gtk::main(); 
</pre>

<p>
We set up the application. An infinite loop is
created. From this point the application sits and waits
for external events from the user or the system. The loop runs
until it is terminated. 
</p>


<img src="/img/gui/phpgtk/simple.png" alt="Simple">
<div class="figure">Figure: Simple</div>


<h2>Creating a Tooltip</h2>

<p>
The second example will show a tooltip. A tooltip is a small rectangular window, which
gives a brief information about an object. It is usually a GUI component. It is part of
the help system of the application. 
</p>

<pre class="code">
&lt;?php

/* 
ZetCode PHP GTK tutorial

This code shows a tooltip on 
a window and a button.

author: Jan Bodnar
website: www.zetcode.com
last modified: September 2011
*/
 
class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    public function init_ui() {

        $this-&gt;set_title('Tooltips');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $fixed = new GtkFixed();
        $this-&gt;add($fixed);

        $button = new GtkButton("Button");
        $button-&gt;set_size_request(80, 35);
        $button-&gt;set_tooltip_text("Button widget");

        $fixed-&gt;put($button, 50, 50);
        
        $this-&gt;set_tooltip_text("Window widget");

        $this-&gt;set_default_size(250, 150); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
The example creates a window. If we hover a mouse pointer over the area of the
window, a tooltip pops up. 
</p>

<pre class="explanation">
$this-&gt;init_ui();
</pre>

<p>
The creation of the interface is delegated to the <code>init_ui()</code> method. 
</p>

<pre class="explanation">
$fixed = new GtkFixed();
$this-&gt;add($fixed);
</pre>

<p>
The <code>GtkFixed</code> is a container widget, that is used
to position widgets at absolute coordinates. The second line
sets this container for the <code>GtkWindow</code> of the 
example. A window has one central container. 
</p>

<pre class="explanation">
$button-&gt;set_tooltip_text("Button widget");
</pre>

<p>
We set the button's tooltip with the <code>set_tooltip_text()</code> method.
</p>

<pre class="explanation">
$this-&gt;set_tooltip_text("Window widget");
</pre>

<p>
We set a tooltip for the window. The window is accessed
through the <code>$this</code> variable. 
</p>

<pre class="explanation">
$this-&gt;show_all(); 
</pre>

<p>
When there are multiple widgets on the window, we have two options. 
Either to call <code>show()</code> on all widgets, or to call
<code>show_all()</code>, which shows the container and all its children. 
</p>


<img src="/img/gui/phpgtk/tooltips.png" alt="Tooltips">
<div class="figure">Figure: Tooltips</div>


<h2>Quit button</h2>

<p>
In the last example of this section, we will create a quit button. 
When we press this button, the application terminates. 
</p>

<pre class="code">
&lt;?php

/* 
ZetCode PHP GTK tutorial

This program creates a quit
button. When we press the button,
the application terminates. 

author: Jan Bodnar
website: www.zetcode.com
last modified: September 2011
*/
 
class Example extends GtkWindow { 
     

    public function __construct() { 

        parent::__construct(); 
         
        $this-&gt;init_ui();

    } 

    public function init_ui() {

        $this-&gt;set_title('Quit button');         
        $this-&gt;connect_simple('destroy', array('gtk', 'main_quit')); 

        $fixed = new GtkFixed();
        $this-&gt;add($fixed);

        $button = new GtkButton("Quit");
        $button-&gt;set_size_request(80, 35);
        $button-&gt;connect_simple('clicked', array('gtk', 'main_quit'));

        $fixed-&gt;put($button, 50, 50);
                
        $this-&gt;set_default_size(250, 150); 
        $this-&gt;set_position(GTK::WIN_POS_CENTER);
        $this-&gt;show_all();         
    }
} 
     
new Example(); 
Gtk::main();
 
?&gt;
</pre>

<p>
Source code of the example. 
</p>


<pre class="explanation">
$button = new GtkButton("Quit");
</pre>

<p>
Here we create a button widget. The parameter of the
constructor is the button's label.
</p>

<pre class="explanation">
$button-&gt;set_size_request(80, 35);
</pre>

<p>
We set a size for the button.
</p>

<pre class="explanation">
$button-&gt;connect_simple('clicked', array('gtk', 'main_quit'));
</pre>

<p>
We plug the <code>main_quit()</code> method to the
button clicked signal.
</p>


<pre class="explanation">
$fixed-&gt;put($button, 50, 50);
</pre>

<p>
We put the quit button into the fixed container at x=50, y=50.
</p>

<p>
This section was an introduction to the GTK library with the PHP language.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified September 8, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
